<template>
    <svg :class="svgClass" aria-hidden="true" width="100%" height="100%">
      <use class="svg-use" :href="symbolId" :fill="props.color" />
    </svg>
  </template>
   
  <script setup lang="ts" name="SvgIcon">
    import { computed } from 'vue'
   
    interface Props{
        name?:string;         //assets/icons里面的图标文件名称
        color?:string;        //图标颜色
    }
    const props = withDefaults(defineProps<Props>(),{
        className:"",
        name:"",
        color:`black`,
    });
    const symbolId = computed(() => `#${props.name}`)
     const svgClass = computed(() => {
          // if (props.className) {
          //   return `svg-icon ${props.className}`
          // }
          return 'svg-icon'
    });
  </script>
  <style scope lang="scss">
   @import "./index.scss";
  </style>